<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
</head>
<body>
<!--弹窗：出差编辑-->
<div th:fragment="pzcurmainDetailTripEdit" class="modal inmodal fade" id="pzcurmainDetailTripEdit_Modal"
     tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="pzcurmainDetailTripEdit_modalTitle">编辑出差</h4>
                <p id="pzcurmainDetailTripEdit_modalDesc" class="font-bold text-danger"></p>
            </div>
            <div class="modal-body">
                <form id="pzcurmainDetailTripEdit_Form">
                    <input id="pzcurmainDetailTripEdit_id" name="id" type="hidden"/>
                    <div class="row">
                        <div class="col-md-12">
                            <label for="pzcurmainDetailTripEdit_starttime">开始时间</label>
                            <input type="text" class="form-control datetimepicker-input" id="pzcurmainDetailTripEdit_starttime"
                                   name="startTime"
                                   data-toggle="datetimepicker"
                                   data-target="#pzcurmainDetailTripEdit_starttime">
                        </div>
                        <div class="col-md-12">
                            <label for="pzcurmainDetailTripEdit_endtime">结束时间</label>
                            <input type="text" class="form-control datetimepicker-input" id="pzcurmainDetailTripEdit_endtime"
                                    name="endTime"
                                   data-toggle="datetimepicker"
                                   data-target="#pzcurmainDetailTripEdit_endtime">
                        </div>
                        <div class="col-md-12">
                            <label for="pzcurmainDetailTripEdit_startPlace">出发地</label>
                            <input type="text" class="form-control" id="pzcurmainDetailTripEdit_startPlace"
                                    name="startPlace">
                        </div>
                        <div class="col-md-12">
                            <label for="pzcurmainDetailTripEdit_endPlace">目的地</label>
                            <input type="text" class="form-control" id="pzcurmainDetailTripEdit_endPlace"
                                   name="endPlace">
                        </div>
                        <div class="col-md-12">
                            <label for="pzcurmainDetailTripEdit_traffic">交通工具</label>
                            <input type="text" class="form-control" id="pzcurmainDetailTripEdit_traffic" name="traffic">
                        </div>
                        <div class="col-md-12">
                            <label for="pzcurmainDetailTripEdit_expenseunit">费用支出单位</label>
                            <input type="text" class="form-control" id="pzcurmainDetailTripEdit_expenseunit"
                                   name="expenseUnit">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="pzcurmainDetailTripEditObj.submitHandler()">
                    保存
                </button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('.datetimepicker-input').datetimepicker({
                format: 'YYYY-MM-DD'
            });
            $('#pzcurmainDetailTripEdit_Form').validate({
                rules: pzcurmainDetailTripEditObj.dataRule,
                submitHandler: function (form) {
                    pzcurmainDetailTripEditObj.dataFormSubmit(form);
                }
            });
        })
        var pzcurmainDetailTripEditObj = new Object({
            dataRule: {
                startTime: {
                    required: true
                },
                endTime: {
                    required: true
                },
                startPlace: {
                    required: true,
                    maxlength: 100
                },
                endPlace: {
                    required: true,
                    maxlength: 100
                }
            },
            init: function (id) {
                $("#pzcurmainDetailTripEdit_Form")[0].reset();
                $("input[type='hidden']").val("");
                if(id){
                    $.myGet({
                        url: `/pz/cur/pztraffic/${id}`,
                        success: function (data) {
                            if (data && data.code === 0) {
                                let trip = data.trip;
                                for (let i in trip) {
                                    if ($("#pzcurmainDetailTripEdit_Form").find(`[name=${i}]`).length > 0) {
                                        $("#pzcurmainDetailTripEdit_Form").find(`[name=${i}]`).val(trip[i])
                                    }
                                }
                            } else {
                                toastr.error(data.msg, '操作失败')
                            }
                        }
                    })
                }
                this.toggleModal(true)
            },
            toggleModal: function (show) {
                $('#pzcurmainDetailTripEdit_Modal').modal(show ? 'show' : 'hide');
            },
            submitHandler: function () {
                $("#pzcurmainDetailTripEdit_Form").submit();
            },
            dataFormSubmit: function (form) {
                let _self = this;
                let formVals = $(form).serializeArray();
                let data = {}
                for (let i = 0; i < formVals.length; i++) {
                    data[formVals[i].name] = formVals[i].value;
                }
                data.mainId = pzcurmainDetailObj.mainId;
                $.myPost({
                    url: `/pz/cur/pztraffic/${data.id ? "update" : "save"}`,
                    dataType: 'json',
                    data: data,
                    success: function (data) {
                        if (data && data.code == 0) {
                            toastr.success(data.msg, '操作提示')
                            _self.toggleModal(false);
                            pzcurmainDetailTripListObj.refreshDataList();
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            }
        })
    </script>
</div>
</body>
</html>